<template>
  <el-row class="login-page">
    <el-col class="bg">
      <el-row class="logo"></el-row>
      <el-row class="form login">
        <!-- 注册表单
                 :model="formzhuce" 我们在文本框或者密码框输入的内容 都会和这个对象的相关属性进行绑定
                 ref="formRef": 这个用来表单校验时 确认你是哪个表单
                 :rules="xx": xx就是一个变量 其中定义了校验规则 -->
        <el-form
          ref="formRef"
          :model="formzhuce"
          :rules="xx"
          size="large"
          autocomplete="off"
          v-if="isRegister"
        >
          <el-form-item>
            <h1>注册</h1>
          </el-form-item>

          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              placeholder="请输入用户名"
              v-model="formzhuce.username"
            ></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              :prefix-icon="Lock"
              type="password"
              placeholder="请输入密码"
              v-model="formzhuce.password"
            ></el-input>
          </el-form-item>

          <el-form-item prop="repassword">
            <el-input
              :prefix-icon="Lock"
              type="password"
              placeholder="请输入再次密码"
              v-model="formzhuce.repassword"
            ></el-input>
          </el-form-item>
          <!-- 注册按钮 -->
          <el-form-item>
            <el-button
              class="button"
              type="primary btn"
              auto-insert-space
              @click="zhuce(formRef)"
            >
              注册
            </el-button>
          </el-form-item>
          <el-form-item class="flex">
            <el-link type="info" :underline="false" @click="isRegister = false">
              ← 返回
            </el-link>
          </el-form-item>
        </el-form>
        <!-- 登录表单 -->
        <el-form
          ref="form"
          :model="dl"
          :rules="yy"
          size="large"
          autocomplete="off"
          v-else
        >
          <el-form-item>
            <h1>登录</h1>
          </el-form-item>

          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              placeholder="请输入用户名"
              v-model="dl.username"
            ></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              name="password"
              :prefix-icon="Lock"
              type="password"
              placeholder="请输入密码"
              v-model="dl.password"
            ></el-input>
          </el-form-item>

          <el-form-item class="flex">
            <div class="flex">
              <el-checkbox>记住我</el-checkbox>
              <el-link type="primary" :underline="false">忘记密码？</el-link>
            </div>
          </el-form-item>
          <!-- 登录按钮 -->
          <el-form-item>
            <el-button
              class="button"
              type="primary btn"
              auto-insert-space
              @click="denglu(form)"
              >登录</el-button
            >
          </el-form-item>
          <!-- 注册按钮 -->
          <el-form-item class="flex">
            <el-link type="info" :underline="false" @click="isRegister = true">
              注册 →
            </el-link>
          </el-form-item>
        </el-form>
      </el-row>
    </el-col>
  </el-row>
</template>

<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import { ref } from "vue"; //引入ref
import { ElMessage } from "element-plus"; //引入element-plus的提示框
const isRegister = ref(false); //引入ref
const formRef = ref(null); //引入ref
import { save, dll } from "../api/login.js"; //导入js
import { useRouter } from "vue-router"; //路由跳转页面
import {cs} from "../stores/zhuangtai.js";
const zt=cs()
const zhuangtai="true"
//注册表单对象
const formzhuce = ref({
  username: "",
  password: "",
  repassword: "",
});
const form = ref(null);
// 登录表单对象
const dl = ref({
  username: "",
  password: "",
});

//注册表单校验规则
const xx = ref({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 1, max: 16, message: "用户名的长度必须为5~16位", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 1, max: 16, message: "密码长度必须为5~16位", trigger: "blur" },
  ],
  repassword: {
    validator(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      }
      if (value !== formzhuce.value.password) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    },
  },
});
// 登录表单校验规则
const yy = ref({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 1, max: 16, message: "用户名的长度必须为5~16位", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 1, max: 16, message: "密码长度必须为5~16位", trigger: "blur" },
  ],
});

//注册发送请求
const save_zhuce = async () => {
  const res = await save(formzhuce.value);
  console.log(res);
  if (res.code == 20011) {
    ElMessage({
      message: res.msg,
      type: "success",
    });
  } else {
    ElMessage.error(res.msg);
  }
};

import { cuser } from "../stores/user.js";
import {jwts} from "../stores/jwt.js";
//luyou方法
const router = useRouter();
const user = cuser();
const jwt=jwts();
// 登录发送请求
const save_denglu = async () => {
  const res = await dll(dl.value);
  user.setUser('登录信息');
  console.log(res);
  if (res.code == 20041) {
    ElMessage({
      message: res.msg,
      type: "success",
    });
    const route = res.data.user;
    zt.setzhuangtai(zhuangtai);
    jwt.setjwt(res.data.jwt)
    //登录成功后跳转页面
    setTimeout(() => {
      router.push("/shouye");
    }, 2000);
    user.setUser(route);
  } else {
    ElMessage.error(res.msg);
  }
};

// 点击注册按钮
const zhuce = (obj) => {
  console.log(obj);
  // 触发obj这个表单的校验规则 如果校验通过 则valid是true  否则是false
  obj.validate((valid) => {
    if (valid) {
      console.log("校验通过");
      save_zhuce(); //调用注册方法
      isRegister.value = false; //切换到登录界面
      formzhuce.value = {}; //清空表单数据
    } else {
      console.log("校验失败");
    }
  });
};
// 点击登录按钮
const denglu = (aa) => {
  console.log(aa);
  aa.validate((valid) => {
    if (valid) {
      console.log("校验通过");
      save_denglu();
      dl.value = {};
    } else {
      console.log("校验失败");
    }
  });
};
</script>

<style lang="scss" scoped>
.login-page {
  height: 100vh;
  background-color: #fff;

  .bg {
    background-image: url("@/assets/back.jpg"); /* 替换为你的图片路径 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    .logo {
      width: 430px;
      height: 500px;
      flex: 0 0 auto; /* 禁止伸缩和收缩，自动基线对齐 */
      background-image: url("@/assets/logo2.png"); /* 替换为你的图片路径 */
      background-position: center;
      background-repeat: no-repeat;
      background-color: #00b96b;
      opacity: 0.9;
    }
    .login {
      width: 500px;
      height: 500px;
      flex: 0 0 auto; /* 禁止伸缩和收缩，自动基线对齐 */
      background-color: #fff;
      padding: 35px;
    }

    .form {
      display: flex;
      flex-direction: column;
      justify-content: center;
      user-select: none;

      .title {
        margin: 0 auto;
      }

      .button {
        width: 100%;
      }
      .login {
        background: #00b96b;
      }

      .flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      .btn {
        background-color: #00b96b;
      }
    }
  }
}
</style>
